<template>
	<view class="body">
		<uni-nav-bar 
		fixed="true"
		left-text="返回" 
		@clickLeft="back"
		leftIcon="left"
		title="资讯" 
		height="130rpx"
		></uni-nav-bar >
		<view class="top">
			<input type="text" value="" placeholder="搜索关键字" v-model="key"/>
			<text class="iconfont icon-search" @click="getnewslist"></text>
		</view>
		<view class="news">
			<view class="newscon">
				<ul>
					<li v-for="(item,index) in newslist" @click="godynamic(item.id)">
						<view class="titlebox">
							<view class="title">{{item.title}}</view>
							<view class="time">{{item.addtime | timeFormat}}</view>
						</view>
						<image :src="URL+item.picture" mode=""></image>
					</li>
					
				</ul>
			</view>
		</view> 
	</view>
</template>

<script>
	import moment from 'moment'
	import {IMGBASEURL} from '../../utils/config.js';
	import {newslist} from '../../api/news.js'
	export default{
		data(){
			return{
				
				newslist:[],
				total:0,
				URL:IMGBASEURL,
				key:''
			}
		},
		onLoad() {
		this.getnewslist()
		},
		filters:{
			timeFormat(val){
				return moment(val).format("YYYY-MM-DD HH:mm")
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			godynamic(id){
				console.log(id)
				uni.navigateTo({
					url:'/pages/dynamic/index?id='+id
				})
			},
			async getnewslist(){
				let res = await newslist({key:this.key})
				console.log(res)
				// const list=this.newslist.concat(res.data.list)
				this.newslist=res.data.list
			},
		}
	}
</script>

<style lang="less">
	/deep/.uni-navbar--border[data-v-6bda1a90]{
		border-bottom-style:none
	}
	/deep/.uni-nav-bar-text{
		font-size: 30rpx;
	}
	.body{
		width: 750rpx;
		padding: 0 33rpx;
		box-sizing: border-box;
	.top{
		width: 100%;
		height: 85rpx;
		background-color: #f4f6f6;
		border-radius: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 70rpx;
		input{
			width: 80%;
			height: 100%;
			margin-left: 33rpx;
		}
		text{
			font-size: 36rpx;
			margin-right: 35rpx;
		}
	}
		.news{
			
			.newscon{
				width: 100%;
				ul{
					width: 100%;
					li{
						height: 100%;
						height: 162rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 60rpx;
						.titlebox{
							display: flex;
							width: 375rpx;
							flex-wrap: wrap;
							align-content: space-between;
							.title{
								width: 100%;
								font-size: 27rpx;
							}
							.time{
								font-size:17rpx ;
								color: #737373;
							}
						}
						image{
							width: 243rpx;
							height: 100%;
						}
					}
				}
			}
		}
	}
	
</style>
